<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>wgxadmin - test</title>

  <meta name="description" content="test" />

  <link rel="stylesheet" href="wgx_admin_static/fontawesome/5.3.1/css/all.min.css" />
  <style>
    div.test {
      width: 500px;
      height: 600px;
      margin: 0 auto;
    }
    div.red {
      background-color: red;
    }
    div.green {
      background-color: green;
    }
    button.toggle {
      margin-left: 220px;
      margin-top: 280px;
    }
  </style>
</head>

<body>
  <div class="test red">
    <button class="toggle">toggle</button>
    <script>
    </script>
  </div>

  <script src="wgx_admin_static/jquery-3.6.1.min.js"></script>
  <script>
    function loadState() {
      var storage = window.localStorage;
      if (!storage) { return; }
      var divTest = $('div.test');
      if (divTest.length > 0) {
        var colorClass = storage.getItem('testColorClass');
        if (colorClass) {
          divTest.removeClass('red');
          divTest.removeClass('green');
          divTest.addClass(colorClass);
        }
      }
    };
    loadState();
    jQuery(function ($) {
      $('button.toggle').click(function (e) {
        e.preventDefault();
        e.stopPropagation();
        var divTest = $('div.test');
        if (divTest.hasClass('red')) {
          divTest.removeClass('red');
          divTest.addClass('green');
          if (window.localStorage) {
            window.localStorage.setItem('testColorClass', 'green');
          }
        } else {
          divTest.removeClass('green');
          divTest.addClass('red');
          if (window.localStorage) {
            window.localStorage.setItem('testColorClass', 'red');
          }
        }
      });
    });
  </script>
</body>

</html>